<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 物资调拨</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>

    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="material.html"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">物资调拨</div>
      <div class="nav-right">
        <i class="fas fa-question-circle"></i>
      </div>
    </div>

    <!-- 应用内容 -->
    <div class="app-content">
      <form>
        <!-- 基本信息 -->
        <div class="card mx-4 mt-4">
          <div class="card-header">
            <span>基本信息</span>
            <span class="text-red-500 text-sm">*必填</span>
          </div>
          <div class="card-body">
            <div class="form-group">
              <label class="form-label">调拨标题<span class="text-red-500">*</span></label>
              <input type="text" class="form-control" placeholder="请输入调拨标题" required>
            </div>
            
            <div class="form-group">
              <label class="form-label">调出部门<span class="text-red-500">*</span></label>
              <div class="relative">
                <select class="form-control appearance-none" name="department_out" required>
                  <option value="">请选择调出部门</option>
                  <option value="1">内科</option>
                  <option value="2">外科</option>
                  <option value="3">儿科</option>
                  <option value="4">妇产科</option>
                  <option value="5">急诊科</option>
                  <option value="6">检验科</option>
                  <option value="7">放射科</option>
                  <option value="8">药剂科</option>
                  <option value="9">护理部</option>
                  <option value="10">行政部</option>
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                  <i class="fas fa-chevron-down text-gray-400"></i>
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <label class="form-label">调入部门<span class="text-red-500">*</span></label>
              <div class="relative">
                <select class="form-control appearance-none" name="department_in" required>
                  <option value="">请选择调入部门</option>
                  <option value="1">内科</option>
                  <option value="2">外科</option>
                  <option value="3">儿科</option>
                  <option value="4">妇产科</option>
                  <option value="5">急诊科</option>
                  <option value="6">检验科</option>
                  <option value="7">放射科</option>
                  <option value="8">药剂科</option>
                  <option value="9">护理部</option>
                  <option value="10">行政部</option>
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                  <i class="fas fa-chevron-down text-gray-400"></i>
                </div>
              </div>
              <div class="text-xs text-gray-500 mt-1">
                <i class="fas fa-info-circle mr-1"></i>调入部门不能与调出部门相同
              </div>
            </div>
            
            <div class="form-group">
              <label class="form-label">期望调拨日期<span class="text-red-500">*</span></label>
              <input type="date" class="form-control" required>
            </div>
            
            <div class="form-group mb-0">
              <label class="form-label">调拨原因<span class="text-red-500">*</span></label>
              <textarea class="form-control" rows="3" placeholder="请简要说明调拨原因" required></textarea>
            </div>
          </div>
        </div>
        
        <!-- 物资清单 -->
        <div class="card mx-4 mt-4">
          <div class="card-header">
            <span>物资清单</span>
            <span class="text-red-500 text-sm">*必填</span>
          </div>
          <div class="card-body">
            <div class="mb-4">
              <button type="button" class="btn-primary-outline w-full" id="addMaterialBtn">
                <i class="fas fa-plus mr-2"></i>添加物资
              </button>
            </div>
            
            <div class="material-list" id="materialList">
              <!-- 物资项 -->
              <div class="material-item">
                <div class="material-header">
                  <div class="material-name">一次性医用口罩</div>
                  <button type="button" class="btn-icon delete-material">
                    <i class="fas fa-trash-alt text-red-500"></i>
                  </button>
                </div>
                <div class="material-body">
                  <div class="material-info">
                    <div class="info-item">
                      <span class="info-label">规格：</span>
                      <span class="info-value">50只/盒</span>
                    </div>
                    <div class="info-item">
                      <span class="info-label">库存：</span>
                      <span class="info-value">120盒</span>
                    </div>
                  </div>
                  <div class="material-quantity">
                    <span class="quantity-label">调拨数量：</span>
                    <div class="quantity-control">
                      <button type="button" class="quantity-btn minus">
                        <i class="fas fa-minus"></i>
                      </button>
                      <input type="number" class="quantity-input" value="10" min="1" max="120">
                      <button type="button" class="quantity-btn plus">
                        <i class="fas fa-plus"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="material-item">
                <div class="material-header">
                  <div class="material-name">医用酒精</div>
                  <button type="button" class="btn-icon delete-material">
                    <i class="fas fa-trash-alt text-red-500"></i>
                  </button>
                </div>
                <div class="material-body">
                  <div class="material-info">
                    <div class="info-item">
                      <span class="info-label">规格：</span>
                      <span class="info-value">500ml/瓶</span>
                    </div>
                    <div class="info-item">
                      <span class="info-label">库存：</span>
                      <span class="info-value">50瓶</span>
                    </div>
                  </div>
                  <div class="material-quantity">
                    <span class="quantity-label">调拨数量：</span>
                    <div class="quantity-control">
                      <button type="button" class="quantity-btn minus">
                        <i class="fas fa-minus"></i>
                      </button>
                      <input type="number" class="quantity-input" value="5" min="1" max="50">
                      <button type="button" class="quantity-btn plus">
                        <i class="fas fa-plus"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 审批流程 -->
        <div class="card mx-4 mt-4">
          <div class="card-header">
            <span>审批流程</span>
          </div>
          <div class="card-body">
            <div class="approval-flow">
              <div class="approval-step">
                <div class="step-icon">
                  <i class="fas fa-user-check"></i>
                </div>
                <div class="step-info">
                  <div class="step-name">部门主管审批</div>
                  <div class="step-approver">张主管</div>
                </div>
              </div>
              <div class="approval-connector"></div>
              <div class="approval-step">
                <div class="step-icon">
                  <i class="fas fa-warehouse"></i>
                </div>
                <div class="step-info">
                  <div class="step-name">物资管理员确认</div>
                  <div class="step-approver">李管理</div>
                </div>
              </div>
              <div class="approval-connector"></div>
              <div class="approval-step">
                <div class="step-icon">
                  <i class="fas fa-check-circle"></i>
                </div>
                <div class="step-info">
                  <div class="step-name">调入部门确认</div>
                  <div class="step-approver">王主管</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 附件 -->
        <div class="card mx-4 mt-4">
          <div class="card-header">
            <span>附件</span>
            <span class="text-gray-500 text-sm">选填</span>
          </div>
          <div class="card-body">
            <div class="mb-4">
              <button type="button" class="btn-primary-outline w-full">
                <i class="fas fa-paperclip mr-2"></i>添加附件
              </button>
            </div>
            <div class="text-center text-gray-500 text-sm">
              可上传调拨相关的文件或图片
            </div>
          </div>
        </div>
        
        <!-- 提交按钮 -->
        <div class="fixed-bottom-btn">
          <button type="submit" class="btn-primary w-full">提交申请</button>
        </div>
      </form>
    </div>
  </div>
  
  <!-- 物资选择模态框 -->
  <div class="modal" id="materialModal">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">选择物资</div>
        <button class="modal-close" id="closeModal"><i class="fas fa-times"></i></button>
      </div>
      <div class="modal-body">
        <div class="search-box mb-4">
          <i class="fas fa-search search-icon"></i>
          <input type="text" placeholder="搜索物资名称或编号" class="search-input">
        </div>
        
        <!-- 筛选标签 -->
        <div class="filter-tags mb-4 flex overflow-x-auto pb-2">
          <div class="filter-tag active">全部</div>
          <div class="filter-tag">医疗耗材</div>
          <div class="filter-tag">办公用品</div>
          <div class="filter-tag">设备仪器</div>
        </div>
        
        <div class="material-select-list">
          <div class="material-select-item">
            <div class="material-select-info">
              <div class="material-select-name">一次性医用手套</div>
              <div class="material-select-meta">规格：100只/盒 | 库存：80盒</div>
            </div>
            <div class="material-select-action">
              <i class="fas fa-plus-circle text-blue-500"></i>
            </div>
          </div>
          
          <div class="material-select-item">
            <div class="material-select-info">
              <div class="material-select-name">医用纱布</div>
              <div class="material-select-meta">规格：10cm×10cm | 库存：200包</div>
            </div>
            <div class="material-select-action">
              <i class="fas fa-plus-circle text-blue-500"></i>
            </div>
          </div>
          
          <div class="material-select-item">
            <div class="material-select-info">
              <div class="material-select-name">医用棉签</div>
              <div class="material-select-meta">规格：100支/包 | 库存：150包</div>
            </div>
            <div class="material-select-action">
              <i class="fas fa-plus-circle text-blue-500"></i>
            </div>
          </div>
          
          <div class="material-select-item">
            <div class="material-select-info">
              <div class="material-select-name">碘伏</div>
              <div class="material-select-meta">规格：500ml/瓶 | 库存：60瓶</div>
            </div>
            <div class="material-select-action">
              <i class="fas fa-plus-circle text-blue-500"></i>
            </div>
          </div>
          
          <div class="material-select-item">
            <div class="material-select-info">
              <div class="material-select-name">医用胶带</div>
              <div class="material-select-meta">规格：1.25cm×9.1m | 库存：100卷</div>
            </div>
            <div class="material-select-action">
              <i class="fas fa-plus-circle text-blue-500"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-primary w-full" id="confirmMaterial">确定</button>
      </div>
    </div>
  </div>
  
  <script>
    // 添加物资按钮
    const addMaterialBtn = document.getElementById('addMaterialBtn');
    const materialModal = document.getElementById('materialModal');
    const closeModal = document.getElementById('closeModal');
    const confirmMaterial = document.getElementById('confirmMaterial');
    const materialList = document.getElementById('materialList');
    const searchInput = document.querySelector('.search-input');
    
    // 模拟物资数据
    const materialData = [
      { id: 1, name: '一次性医用手套', spec: '100只/盒', stock: 80, unit: '盒', category: '医疗耗材' },
      { id: 2, name: '医用纱布', spec: '10cm×10cm', stock: 200, unit: '包', category: '医疗耗材' },
      { id: 3, name: '医用棉签', spec: '100支/包', stock: 150, unit: '包', category: '医疗耗材' },
      { id: 4, name: '碘伏', spec: '500ml/瓶', stock: 60, unit: '瓶', category: '医疗耗材' },
      { id: 5, name: '医用胶带', spec: '1.25cm×9.1m', stock: 100, unit: '卷', category: '医疗耗材' },
      { id: 6, name: '一次性医用口罩', spec: '50只/盒', stock: 120, unit: '盒', category: '医疗耗材' },
      { id: 7, name: '医用酒精', spec: '500ml/瓶', stock: 50, unit: '瓶', category: '医疗耗材' },
      { id: 8, name: 'A4打印纸', spec: '500张/包', stock: 30, unit: '包', category: '办公用品' },
      { id: 9, name: '圆珠笔', spec: '0.5mm', stock: 100, unit: '支', category: '办公用品' },
      { id: 10, name: '订书机', spec: '标准型', stock: 20, unit: '个', category: '办公用品' },
      { id: 11, name: '血压计', spec: '电子式', stock: 15, unit: '台', category: '设备仪器' },
      { id: 12, name: '体温计', spec: '电子式', stock: 25, unit: '支', category: '设备仪器' }
    ];
    
    // 已选物资ID集合
    let selectedMaterialIds = [];
    
    // 打开模态框
    addMaterialBtn.addEventListener('click', function() {
      materialModal.classList.add('active');
      renderMaterialSelectList(materialData);
    });
    
    // 关闭模态框
    closeModal.addEventListener('click', function() {
      materialModal.classList.remove('active');
      // 清空搜索框
      searchInput.value = '';
      // 重置筛选标签
      document.querySelectorAll('.filter-tag').forEach(tag => {
        if(tag.textContent === '全部') {
          tag.classList.add('active');
        } else {
          tag.classList.remove('active');
        }
      });
    });
    
    // 确认选择物资
    confirmMaterial.addEventListener('click', function() {
      const selectedItems = document.querySelectorAll('.material-select-item.selected');
      
      if(selectedItems.length === 0) {
        alert('请至少选择一项物资');
        return;
      }
      
      selectedItems.forEach(item => {
        const materialId = parseInt(item.dataset.id);
        const material = materialData.find(m => m.id === materialId);
        
        // 如果物资已经在列表中，则不重复添加
        if(!selectedMaterialIds.includes(materialId)) {
          selectedMaterialIds.push(materialId);
          addMaterialToList(material);
        }
      });
      
      materialModal.classList.remove('active');
      // 清空搜索框
      searchInput.value = '';
    });
    
    // 渲染物资选择列表
    function renderMaterialSelectList(materials) {
      const materialSelectList = document.querySelector('.material-select-list');
      materialSelectList.innerHTML = '';
      
      materials.forEach(material => {
        const isSelected = selectedMaterialIds.includes(material.id);
        const materialItem = document.createElement('div');
        materialItem.className = `material-select-item ${isSelected ? 'selected' : ''}`;
        materialItem.dataset.id = material.id;
        materialItem.dataset.category = material.category;
        
        materialItem.innerHTML = `
          <div class="material-select-info">
            <div class="material-select-name">${material.name}</div>
            <div class="material-select-meta">规格：${material.spec} | 库存：${material.stock}${material.unit}</div>
          </div>
          <div class="material-select-action">
            <i class="fas ${isSelected ? 'fa-check-circle text-green-500' : 'fa-plus-circle text-blue-500'}"></i>
          </div>
        `;
        
        materialSelectList.appendChild(materialItem);
      });
      
      // 添加物资选择事件
      document.querySelectorAll('.material-select-item').forEach(item => {
        item.addEventListener('click', function() {
          this.classList.toggle('selected');
          const icon = this.querySelector('.material-select-action i');
          if(this.classList.contains('selected')) {
            icon.className = 'fas fa-check-circle text-green-500';
          } else {
            icon.className = 'fas fa-plus-circle text-blue-500';
          }
        });
      });
    }
    
    // 添加物资到列表
    function addMaterialToList(material) {
      const materialItem = document.createElement('div');
      materialItem.className = 'material-item';
      materialItem.dataset.id = material.id;
      
      materialItem.innerHTML = `
        <div class="material-header">
          <div class="material-name">${material.name}</div>
          <button type="button" class="btn-icon delete-material">
            <i class="fas fa-trash-alt text-red-500"></i>
          </button>
        </div>
        <div class="material-body">
          <div class="material-info">
            <div class="info-item">
              <span class="info-label">规格：</span>
              <span class="info-value">${material.spec}</span>
            </div>
            <div class="info-item">
              <span class="info-label">库存：</span>
              <span class="info-value">${material.stock}${material.unit}</span>
            </div>
          </div>
          <div class="material-quantity">
            <span class="quantity-label">调拨数量：</span>
            <div class="quantity-control">
              <button type="button" class="quantity-btn minus">
                <i class="fas fa-minus"></i>
              </button>
              <input type="number" class="quantity-input" value="1" min="1" max="${material.stock}" name="quantity_${material.id}">
              <button type="button" class="quantity-btn plus">
                <i class="fas fa-plus"></i>
              </button>
            </div>
          </div>
        </div>
      `;
      
      materialList.appendChild(materialItem);
      
      // 添加删除事件
      const deleteBtn = materialItem.querySelector('.delete-material');
      deleteBtn.addEventListener('click', function() {
        const item = this.closest('.material-item');
        const materialId = parseInt(item.dataset.id);
        // 从已选物资ID集合中移除
        selectedMaterialIds = selectedMaterialIds.filter(id => id !== materialId);
        item.remove();
      });
      
      // 添加数量调整事件
      const minusBtn = materialItem.querySelector('.quantity-btn.minus');
      const plusBtn = materialItem.querySelector('.quantity-btn.plus');
      const quantityInput = materialItem.querySelector('.quantity-input');
      
      minusBtn.addEventListener('click', function() {
        let value = parseInt(quantityInput.value);
        if (value > parseInt(quantityInput.min)) {
          quantityInput.value = value - 1;
        }
      });
      
      plusBtn.addEventListener('click', function() {
        let value = parseInt(quantityInput.value);
        if (value < parseInt(quantityInput.max)) {
          quantityInput.value = value + 1;
        }
      });
      
      // 数量输入验证
      quantityInput.addEventListener('change', function() {
        let value = parseInt(this.value);
        const min = parseInt(this.min);
        const max = parseInt(this.max);
        
        if (isNaN(value) || value < min) {
          this.value = min;
        } else if (value > max) {
          this.value = max;
        }
      });
    }
    
    // 搜索物资
    searchInput.addEventListener('input', function() {
      const keyword = this.value.toLowerCase().trim();
      const filteredMaterials = materialData.filter(material => 
        material.name.toLowerCase().includes(keyword) || 
        material.spec.toLowerCase().includes(keyword)
      );
      renderMaterialSelectList(filteredMaterials);
    });
    
    // 筛选标签
    const filterTags = document.querySelectorAll('.filter-tag');
    filterTags.forEach(tag => {
      tag.addEventListener('click', function() {
        filterTags.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        const category = this.textContent;
        let filteredMaterials;
        
        if (category === '全部') {
          filteredMaterials = materialData;
        } else {
          filteredMaterials = materialData.filter(material => material.category === category);
        }
        
        renderMaterialSelectList(filteredMaterials);
      });
    });
    
    // 部门选择验证
    const transferForm = document.querySelector('form');
    const transferTitle = document.querySelector('input[placeholder="请输入调拨标题"]');
    const departmentOut = document.querySelector('select:nth-of-type(1)');
    const departmentIn = document.querySelector('select:nth-of-type(2)');
    const transferDate = document.querySelector('input[type="date"]');
    const transferReason = document.querySelector('textarea');
    
    if (departmentOut && departmentIn) {
      const validateDepartments = function() {
        if (departmentOut.value && departmentIn.value && departmentOut.value === departmentIn.value) {
          departmentIn.setCustomValidity('调入部门不能与调出部门相同');
        } else {
          departmentIn.setCustomValidity('');
        }
      };
      
      departmentOut.addEventListener('change', validateDepartments);
      departmentIn.addEventListener('change', validateDepartments);
    }
    
    // 设置当前日期为默认值
    if (transferDate) {
      const today = new Date();
      const yyyy = today.getFullYear();
      const mm = String(today.getMonth() + 1).padStart(2, '0');
      const dd = String(today.getDate()).padStart(2, '0');
      transferDate.value = `${yyyy}-${mm}-${dd}`;
      
      // 设置最小日期为今天
      transferDate.min = `${yyyy}-${mm}-${dd}`;
    }
    
    // 表单提交验证
    transferForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      // 验证是否添加了物资
      const materialItems = document.querySelectorAll('.material-item');
      if (materialItems.length === 0) {
        alert('请至少添加一项物资');
        return;
      }
      
      // 验证物资数量是否合法
      let isQuantityValid = true;
      materialItems.forEach(item => {
        const quantityInput = item.querySelector('.quantity-input');
        const value = parseInt(quantityInput.value);
        const min = parseInt(quantityInput.min);
        const max = parseInt(quantityInput.max);
        
        if (isNaN(value) || value < min || value > max) {
          isQuantityValid = false;
        }
      });
      
      if (!isQuantityValid) {
        alert('请检查物资数量是否合法');
        return;
      }
      
      // 收集表单数据
      const formData = {
        title: transferTitle.value,
        departmentOut: departmentOut.options[departmentOut.selectedIndex].text,
        departmentIn: departmentIn.options[departmentIn.selectedIndex].text,
        transferDate: transferDate.value,
        reason: transferReason.value,
        materials: []
      };
      
      // 收集物资数据
      materialItems.forEach(item => {
        const materialName = item.querySelector('.material-name').textContent;
        const materialSpec = item.querySelector('.info-value:nth-of-type(1)').textContent;
        const quantity = item.querySelector('.quantity-input').value;
        
        formData.materials.push({
          name: materialName,
          spec: materialSpec,
          quantity: quantity
        });
      });
      
      // 模拟提交成功
      alert('调拨申请提交成功！');
      console.log('表单数据:', formData);
      
      // 重置表单
      // transferForm.reset();
      // materialList.innerHTML = '';
      // selectedMaterialIds = [];
      
      // 实际项目中这里应该是发送请求到服务器
      // fetch('/api/material/transfer', {
      //   method: 'POST',
      //   headers: {
      //     'Content-Type': 'application/json'
      //   },
      //   body: JSON.stringify(formData)
      // })
      // .then(response => response.json())
      // .then(data => {
      //   if (data.success) {
      //     alert('调拨申请提交成功！');
      //     window.location.href = 'material.html';
      //   } else {
      //     alert('提交失败：' + data.message);
      //   }
      // })
      // .catch(error => {
      //   alert('提交出错：' + error.message);
      // });
    });
    
    // 模态框筛选标签事件（已在上方定义，此处不需要重复）
    // 注意：filterTags变量已在上方定义，此处不需要重复声明
  </script>
  
  <style>
    /* 筛选标签样式 */
    .filter-tags {
      display: flex;
      gap: 8px;
    }
    
    .filter-tag {
      padding: 6px 12px;
      background-color: #f3f4f6;
      border-radius: 16px;
      font-size: 12px;
      color: #6b7280;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .filter-tag.active {
      background-color: #e6f7ff;
      color: #1890ff;
      border: 1px solid #91d5ff;
    }
    
    /* 物资项样式 */
    .material-item {
      background-color: #f9fafb;
      border-radius: 8px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    
    .material-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      background-color: #f3f4f6;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .material-name {
      font-weight: 500;
    }
    
    .material-body {
      padding: 12px;
    }
    
    .material-info {
      display: flex;
      margin-bottom: 8px;
    }
    
    .info-item {
      margin-right: 16px;
      font-size: 14px;
      color: #6b7280;
    }
    
    .material-quantity {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .quantity-label {
      font-size: 14px;
    }
    
    .quantity-control {
      display: flex;
      align-items: center;
    }
    
    .quantity-btn {
      width: 28px;
      height: 28px;
      border-radius: 4px;
      background-color: #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
    }
    
    .quantity-input {
      width: 50px;
      height: 28px;
      text-align: center;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      margin: 0 8px;
    }
    
    /* 审批流程样式 */
    .approval-flow {
      padding: 8px 0;
    }
    
    .approval-step {
      display: flex;
      align-items: center;
      padding: 8px 0;
    }
    
    .step-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #eff6ff;
      color: #3b82f6;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }
    
    .step-name {
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .step-approver {
      font-size: 12px;
      color: #6b7280;
    }
    
    .approval-connector {
      width: 2px;
      height: 20px;
      background-color: #e5e7eb;
      margin-left: 18px;
    }
    
    /* 物资选择模态框样式 */
    .material-select-list {
      max-height: 400px;
      overflow-y: auto;
    }
    
    .material-select-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      border-bottom: 1px solid #e5e7eb;
      cursor: pointer;
    }
    
    .material-select-item:last-child {
      border-bottom: none;
    }
    
    .material-select-item.selected {
      background-color: #f0f7ff;
    }
    
    .material-select-info {
      flex: 1;
    }
    
    .material-select-name {
      font-weight: 500;
      margin-bottom: 4px;
    }
    
    .material-select-meta {
      font-size: 12px;
      color: #6b7280;
    }
    
    .material-select-action {
      margin-left: 12px;
    }
    
    /* 模态框样式 */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
    }
    
    .modal.active {
      opacity: 1;
      visibility: visible;
    }
    
    .modal-content {
      width: 90%;
      max-width: 360px;
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      transform: scale(0.9);
      transition: transform 0.3s;
    }
    
    .modal.active .modal-content {
      transform: scale(1);
    }
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .modal-title {
      font-weight: 600;
      font-size: 16px;
    }
    
    .modal-close {
      background: none;
      border: none;
      font-size: 18px;
      color: #999;
      cursor: pointer;
    }
    
    .modal-body {
      padding: 16px;
      max-height: 60vh;
      overflow-y: auto;
    }
    
    .modal-footer {
      padding: 12px 16px;
      border-top: 1px solid #f0f0f0;
    }
    
    .search-box {
      position: relative;
      margin-bottom: 16px;
    }
    
    .search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 12px 10px 36px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
    }
    
    .fixed-bottom-btn {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 12px 16px;
      background-color: white;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
      z-index: 100;
    }